<template>
  <div id="_hohycixe" class="tree1">
    <div v-for="(item,index) in treeList" :key="index" class="node">
      <div class="title1"><img class="img1" src="@/assets/img/u593.svg">{{ item.nodeName }}</div>
      <div v-for="(i,idx) in item.sceneChildNodeManagerList" :key="idx" class="chidren-node" :style="currentNode && currentNode.childNodeId == i.childNodeId ?`background:${colorFn(i.executeStatus).bg}` :''" @click="(e)=>{clickHandler(i,e)}">
        <img class="img1 img2" src="@/assets/img/u598.svg">{{ i.childNodeName }}
        <span class="status" :style="{color: colorFn(i.executeStatus).color}">{{ colorFn(i.executeStatus).label }}</span>
        <div :class="`_4dxodin2`" />
      </div>
    </div>
    <div v-if="currentNode" class="card" :style="`left:${left}px;top:${top}px`">
      <Card class="c1" :data="currentNode" :dict1="dict1" :devicelist="devicelist" :machinelist="machineList" @deleteNode="deleteNode" />
    </div>
  </div>
</template>

<script>
import Card from '@/views/scenceManage/sceneSupervision/card/Card'
// 0  未执行，1已执行，2执行中，3执行异常
export default {
  name: 'Tree',
  components: {
    Card
  },
  model: {
    prop: 'currentNode',
    event: 'input'
  },
  props: {
    treeList: {
      type: Array,
      default: () => {
        return []
      }
    },
    dict1: {
      type: Array,
      default: () => {
        return []
      }
    },
    devicelist: {
      type: Array,
      default: () => {
        return []
      }
    },
    machineList: {
      type: Array,
      default: () => {
        return []
      }
    },
    currentNode: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      left: 0,
      top: 0
    }
  },
  watch: {
    treeList(val) {
      // console.log('val', val)
    },
    currentNode() {
      this.left = -9999
      this.top = -9999
    }
  },
  created() {
    this.colorMap = {
      1: { color: 'rgb(7, 205, 177)', label: '已执行', bg: 'rgba(7, 205, 177,.5)' },
      2: { color: 'rgb(255, 0, 209)', label: '执行中', bg: 'rgba(255, 0, 209,.5)' },
      3: { color: 'rgb(250, 81, 81)', label: '故障', bg: 'rgba(250, 81, 81,.5)' }
    }
  },
  methods: {
    colorFn(k) {
      const l = this.colorMap[k]
      return l || { bg: '#134961' }
    },
    clickHandler(item, e) {
      this.$emit('input', item)
      this.$nextTick(() => {
        this.getClientRect(e)
      })
    },
    deleteNode() {
      this.$emit('input', null)
    },
    getClientRect(e) {
      const parent = document.getElementById('_hohycixe')
      const chidren = e.target.querySelector('._4dxodin2')

      const p = parent?.getBoundingClientRect()
      const c = chidren?.getBoundingClientRect()
      if (p && c) {
        this.left = c.left - p.left
        this.top = c.top - p.top
      }
    }
  }

}
</script>

<style scoped lang="scss">
.tree1 {
  position: relative;
  overflow-y: auto;
  width: calc(100% - 460px);
  height: calc(100vh - 228px);
  margin: 20px 0;
  font-size: 14px;
  &::-webkit-scrollbar {
    width: 0;
  }
  .node {
    position: relative;
    &::after {
      position: absolute;
      top: 22px;
      left: 26px;
      width: 1px;
      height: 100%;
      content: '';
      background: #0c7398;
    }
    &>div {
      display: flex;
      align-items: center;
      padding-left: 20px;
      line-height: 30px;
    }
    .title1 {
      margin: 10px 0;
    }
    .img1 {
      margin-right: 10px;
    }
    .img2 {
      margin-left: 20px;
    }
  }
  .node:last-of-type::after {
    height: calc(100% - 24px);
  }
  .chidren-node {
    position: relative;
    cursor: pointer;
    &:hover {
      background: #134961;
    }
    &::before {
      position: absolute;
      top: 50%;
      left: 27px;
      width: 13px;
      height: 1px;
      content: '';
      background: #0c7398;
    }
    .status {
      margin-left: 15px;
      font-size: 12px;
    }
  }
  .card {
    position: absolute;
    transform: translateY(50%);
    .c1 {
      top: 0;
      transform: translateY(0);
    }
  }
}
</style>
